<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  type: 'login',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <image class="bg" src="/static/icon/bg2.png" mode="widthFix"></image>
  <view class="word pt-16 pl-8">
    您好，
    <br />
    欢迎登录~
  </view>
  <wd-form custom-class="custom-form pa-8 mt-8" ref="form" :model="model">
    <wd-cell-group>
      <view class="text-sm mb-1">账号</view>
      <wd-input
        prop="username"
        v-model="model.username"
        placeholder="请输入账号"
        :rules="[{ required: true, message: '请输入账号' }]"
      />
    </wd-cell-group>
    <wd-cell-group custom-class="mt-4">
      <view class="text-sm mb-1">密码</view>
      <wd-input
        prop="password"
        v-model="model.password"
        show-password
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
    </wd-cell-group>
    <wd-checkbox custom-class="mt-6" v-model="remember" checked-color="#2953FF" shape="square">记住密码</wd-checkbox> 
    <wd-button custom-class="mt-10" type="primary" size="large" @click="handleSubmit" block>
      登录
    </wd-button>
  </wd-form>
</template>

<script lang="ts" setup>
const form = ref()
const model = ref({
  username: '',
  password: '',
})
const remember = ref(false)
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        // '校验通过'
        console.log('model---', model)
        uni.switchTab({
          url: '/pages/index/index',
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
onMounted(() => {})
</script>

<style lang="scss">
page {
  background: #fff;
  height: 100vh;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
}
.word {
  position: relative;
  color: #ffffff;
  font-weight: 500;
  font-size: 48rpx;
  letter-spacing: 3rpx;
}
.custom-form {
  background: #fff;
  border-radius: 36rpx 36rpx 0 0;
  position: relative;
}
</style>
